<template>
    <el-card>
        <el-form id="searchBar" :inline="true" :model="searchFurnitureForm" ref="searchFurnitureForm"
                 label-width="120px">
            <el-row>
                <el-form-item label="产出方式：" prop="source">
                    <el-select v-model="searchFurnitureForm.source" placeholder="请选择" value="0">
                        <el-option
                                v-for="item in sourceOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="家具品质：" prop="level">
                    <el-select v-model="searchFurnitureForm.level" placeholder="请选择" value="0">
                        <el-option
                                v-for="item in levelOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="5维排序：" prop="order">
                    <el-radio-group v-model="searchFurnitureForm.order">
                        <el-radio :label="0">默认</el-radio>
                        <el-radio :label="1">观赏</el-radio>
                        <el-radio :label="2">实用</el-radio>
                        <el-radio :label="3">坚固</el-radio>
                        <el-radio :label="4">风水</el-radio>
                        <el-radio :label="5">趣味</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-row>
            <el-row>
                <el-form-item label="家具名称：" prop="name">
                    <el-input style="width: 217px" v-model="searchFurnitureForm.name" placeholder="请输入家具名称"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button @click="onSubmit" icon="el-icon-search" type="primary">查询</el-button>
                    <el-button @click="resetForm('searchFurnitureForm')">重置</el-button>
                </el-form-item>
            </el-row>
        </el-form>

    </el-card>
</template>

<script>
    export default {
        name: "searchBar",
        data() {
            return {
                searchFurnitureForm: {
                    name: '',
                    order: 0,
                    level: '',
                    source: ''
                },
                levelOptions: [{
                    value: 0,
                    label: '白色'
                }, {
                    value: 1,
                    label: '绿色'
                }, {
                    value: 2,
                    label: '蓝色'
                }, {
                    value: 3,
                    label: '紫色'
                }, {
                    value: 4,
                    label: '橙色'
                }],
                sourceOptions: []
            }
        },
        mounted() {
            this.loadOptional()
        },
        methods: {
            onSubmit() {
                this.$emit('searchParam')
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            loadOptional() {
                this.$axios.get('/furniture/sources')
                    .then(success => {
                        this.sourceOptions = success.data.data
                    })
                    .catch(fail => {
                        console.log(fail)
                    })
            }
        }
    }
</script>

<style scoped>
    #searchBar {
    }
</style>